{template 'header'}
<?php
if (empty($_W['styles']['listtype'])) {
	$_W['styles']['listtype'] = 1;
}
?>
<script type='text/javascript' src='resource/js/lib/jquery-1.11.1.min.js'></script>
<link rel="stylesheet" type="text/css" href="../addons/stralbum/template/mobile/photo.mobile.css" media="all" />
<link rel="stylesheet" type="text/css" href="../addons/stralbum/template/mobile/photoswipe.mobile.css" media="all" />
<style>
{if $_W['styles']['listtype'] == 2}
/* 双排 class="album2" */
.gallery{overflow:hidden;}
#gallery li{display:inline-block;width:50%;-webkit-box-sizing:border-box;float:left;border-radius:0;background:none;padding:5px;border:0;box-shadow:none;}
#gallery li a{display:block;background-color: #ffffff;border: 1px solid #ffffff;-moz-border-radius: 2px;-webkit-border-radius: 2px;border-radius: 2px;cursor: pointer;padding: 4px;box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.1);height:150px;overflow:hidden;position:relative;}
#gallery li a p{position:absolute;width:100%;bottom:0;background:#fff;line-height:30px;padding-right: 10px;-webkit-box-sizing:border-box;}
#gallery li a img{width:100%;min-height:100%;}
.album li p>span, .album1 li p>span, .album2 li p>span {float: right;color: #aaa;position: absolute;right: 5px;background: #fff;padding-left: 5px;}
#gallery li p {display: inline-block;max-width: 100%;}
{/if}

{if $_W['styles']['listtype'] == 1 || $show_category}
/* 单排  class="album" */
#gallery li{display:block;width:inherit;margin:5px;}
.album li p>span, .album1 li p>span, .album2 li p>span {float: right;color: #aaa;position: absolute;right: 5px;background: #fff;padding-left: 5px;}
#gallery li p {display: inline-block;max-width: 100%;}
{/if}

{if $_W['styles']['listtype'] == '3' && !$show_category}
/* 瀑布流 class="album" */
.album li p>span, .album1 li p>span, .album2 li p>span {float: right;color: #aaa;position: absolute;right: 5px;background: #fff;padding-left: 5px;}
#gallery li p {display: inline-block;max-width: 100%;}
{/if}

.show-more{text-align:center; margin:10px 0;}
.show-more a{display:inline-block; color:#555; font-size:13px; text-shadow:0 1px 1px #fff; box-shadow:0 1px 1px 0 rgba(0,0,0,0.2) inset; padding:8px 50px; background:#DDD; text-decoration:none;}
</style>
<div id="photo">
	<div class="body">
		<div class="qiandaobanner">
			<a href="#">
            {if empty($_W['styles']['toppic'])}
				<img src="../addons/stralbum/template/images/albums_head.jpg" alt="" style="max-height:200px;"/>
            {else}
            	<img src="{php echo toimage($_W['styles']['toppic'])}" alt="" style="max-height:200px;"/>
            {/if}
			</a>
		</div>
		<div id="main" class="{if $_W['styles']['listtype'] == 2}album2{else}album{/if}"> <!--这个地方class有变化-->
        {if $show_category}
        <p style='padding:5px;'>相册分类 {if !empty($pc)} ({$pc['name']}){/if} </p>
		<ul id="gallery" class="gallery clearfix">
        	{if !empty($category)}
         	{loop $category $row}
            	{if empty($row['parentid'])}
		     	<li style="">
		        	<a href="{$row['url']}">
                    {if !empty($row['thumb'])}
						<img src="{php echo toimage($row['thumb'])}" alt="{$row['name']}">
					{/if}
                    <p style="padding-top:5px; font-size:14px; font-weight:800;">{$row['name']}</p>
                    {if !empty($row['description'])}<p>{$row['description']}</p>{/if}
                    </a>
                	{/if}
            		{loop $row['children'] $row1}
                	<p style='width:100%;border-top:1px solid #ccc;padding-top:8px;'>
                		<a href="{$row1['url']}">
                			{if !empty($row1['thumb'])}<img src="{php echo toimage($row1['thumb'])}" alt="{$row1['name']}" class='pull-left' style='width:40px;height:40px;' >{/if}
                    		<span class='pull-left' style="padding-top:2px;margin-left:10px;">
                    			<span style="font-weight:600;">{$row1['name']}</span>
								{if !empty($row1['description'])}<br/>{$row1['description']}{/if}
                   	 		</span>
               			</a>
               	 	</p>
                	{/loop}
                </li>
             {/loop}
             {/if}
        </ul>
        <div class="show-more"><a href="javascript:;" onclick="loadRecPage();" class="img-rounded pager">显示更多</a></div>
		{else}
        	<p style='padding:5px;'>{if !empty($pc)}{$pc}{/if}{if !empty($cc)}  - {$cc}{/if} </p>
            <ul id="gallery" class="gallery clearfix">
				{loop $list $row}
				<li style="">
					<a href="{php echo $this->createMobileUrl('detail', array('id' => $row['id'], 'weid' => $_W['uniacid']))}">
						 {if !empty($row['thumb'])}<img src="{php echo toimage($row['thumb'])}" alt="{$row['title']}">{/if}
						<p>{$row['title']}</p>
					</a>
				</li>
				{/loop}
			</ul>
		</div>
	</div>
{/if}
</div>
{$pager}
{if $show_category}
<script type="text/javascript">
var pindex = 1;
function loadRecPage() {
	pindex = parseInt(pindex) + 1;
	var pager = $('.pager');
	pager.html('正在加载数据...');
	var url = "{php echo $this->createMobileUrl('listmore')}";
	$.get(url, {'page': pindex}, function(html){
            $('#gallery').append(html);
		if (html.indexOf('li') > - 1) {
			pager.html('显示更多');
		} else {
			pager.html('已全部加载');
		}
	});
}
</script>
{/if}
{if $_W['styles']['listtype'] == 3 && !$show_category}
<script type="text/javascript" src="../addons/stralbum/template/mobile/jquery.imagesloaded.js"></script>
<script type="text/javascript" src="../addons/stralbum/template/mobile/jquery.wookmark.min.js"></script>
<script type="text/javascript">
//下面是瀑布流js
$(function() {
  $('#gallery').imagesLoaded(function() {
	// Prepare layout options.
	var options = {
	  autoResize: false, // This will auto-update the layout when the browser window is resized.
	  container: $('#main'), // Optional, used for some extra CSS styling
	  offset: 4, // Optional, the distance between grid items
	  itemWidth: 140 // Optional, the width of a grid item
	};

	// Get a reference to your grid items.
	var handler = $('#gallery li');
	// Call the layout function.
	handler.wookmark(options);
  });
});
</script>
{/if}
{template 'footer'}